<template>
  <header class="todo-header">
    <h1>TodoList</h1>
    <div class="add-todo">
      <input
        type="text"
        placeholder="请输入待办事项..."
        v-model="content"
        @keyup.enter="addTodo"
      />
      <button @click="addTodo">添加</button>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['add-todo'])

const content = ref('')

const addTodo = () => {
  if (!content.value) {
    alert('待办事项不能为空')
    return
  }

  // 构造todo对象
  const todo = {
    id: Date.now(), // 唯一标识符(使用当前时间戳) 数字
    content: content.value, // 待办事项内容
    done: false,
  }
  // 发送todo对象
  emit('add-todo', todo)

  // 清空输入框内容
  content.value = ''
}
</script>

<style scoped>
.todo-header {
  /* 修改线性渐变背景，使其更长以便于动画效果 */
  background: linear-gradient(
    45deg,
    rgb(231, 99, 99),
    rgb(230, 169, 55),
    rgb(236, 236, 72),
    rgb(226, 160, 98),
    rgb(200, 239, 74),
    rgb(161, 209, 5),
    violet,
    rgb(231, 99, 99)
  );
  /* 增加背景尺寸使其足够长以形成流动效果 */
  background-size: 400% 400%;
  /* 添加动画 */
  animation: gradient-flow 15s ease infinite;
  text-align: center;
  padding: 5px 0 10px;
  color: #f0f8ff;
}

/* 定义动画关键帧 */
@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.todo-header h1 {
  font-size: 24px;
}
.todo-header .add-todo {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.todo-header .add-todo input {
  width: 300px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  outline: none;
  border: solid 1px white;
}
.todo-header .add-todo button {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: #eeeeee;
  color: #0b87ff;
  line-height: 30px;
  border: none;
  border-radius: 3px;
}
.todo-header .add-todo button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}
</style>
